<template>
  <transition :duration="300" @afterLeave="afterLeave">
    <div class="dialog-container" v-if="open" @click.stop="dismiss">
      <div class="overlay" v-if="dark"></div>
      <div class="dialog">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
import {onMounted, ref} from 'vue'

export default {
  name: "BottomDialog",
  props: {
    dark: Boolean,
    onDismiss: Function,
  },
  setup(props) {
    const open = ref(false)
    const {dark, onDismiss} = props;
    const afterLeave = () => {
      if (onDismiss) {
        onDismiss()
      }
    }
    const dismiss = () => {
      open.value = false;
    }
    onMounted(() => {
      open.value = true;
    })
    return {
      open,
      dark,
      afterLeave,
      dismiss
    }
  }
}
</script>

<style lang="less" scoped>
@import "/src/utils/style/color";

.overlay {
  width: 100%;
  height: 100%;
  background-color: @overlay-dark;
  transition: all 0.3s;
}

.dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.3s;
}

.v-enter-from {
  .overlay {
    opacity: 0;
  }

  .dialog {
    transform: translateY(100%);
  }
}

.v-leave-to {
  .overlay {
    opacity: 0;
  }

  .dialog {
    transform: translateY(100%);
  }
}

</style>
